<template>
  <div>
    <!--  搜索  -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="店铺名称">
        <el-input v-model="formInline.shopName" placeholder="店铺名称" @keyup.native="selectData"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="selectData">查询</el-button>
        <el-button type="primary" @click="reload">重置</el-button>
        <el-button type="primary" @click="handleEditAdd">新增</el-button>
      </el-form-item>
    </el-form>
    <!--  数据展示  -->
    <el-table
      :data="tableData.slice(5*(this.currentPage-1),(5*this.currentPage))"
      height="320"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="40">
      </el-table-column>
      <el-table-column
        prop="shopName"
        label="店铺名称"
        width="300">
      </el-table-column>
      <el-table-column
        prop="shopCode"
        label="店铺编码"
        width="300">
      </el-table-column>
      <el-table-column
        prop="shopAccount"
        label="店铺账号名称"
        width="300">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEditUpdate(scope.$index, scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    分页-->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :pager-count="5"
      :page-size="5"
      layout="total, prev, pager, next"
      :total="this.tableData.length">
    </el-pagination>
    <!-- 添加界面 -->
    <el-dialog title="添加" :visible.sync="editFormVisibleAdd" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="formInline" :rules="rules" ref="formInline">
        <el-form-item label="店铺名称" prop="shopName">
          <el-input size="small" v-model="formInline.shopName" auto-complete="off" placeholder="请输入店铺名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" class="title" @click="submitFormAdd('formInline')">添加</el-button>
      </div>
    </el-dialog>
    <!-- 修改界面 -->
    <el-dialog title="修改" :visible.sync="editFormVisibleUpdate" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="formInline" :rules="rules" ref="formInline">
        <el-form-item label="店铺名称" prop="shopName">
          <el-input size="small" v-model="formInline.shopName" auto-complete="off" placeholder="请输入店铺名称"></el-input>
        </el-form-item>
        <el-form-item label="店铺账号" prop="shopAccount">
          <el-input size="small" v-model="formInline.shopAccount" auto-complete="off" placeholder="请输入店铺账号"></el-input>
        </el-form-item>
        <el-form-item label="店铺密码" prop="password">
          <el-input size="small" v-model="formInline.password" auto-complete="off" placeholder="请输入店铺密码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" class="title" @click="submitFormUpdate('formInline')">保存</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name:"shop",
  created() {
    this.getData()
  },
  data() {
    return {
      editFormVisibleUpdate: false, //控制编辑页面显示与隐藏
      editFormVisibleAdd:false,
      rules: {
        shopName: [
          { required: true, message: '请输入店铺名称', trigger: 'blur' }
        ],
        shopAccount: [
          { required: true, message: '请输入店铺账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入店铺密码', trigger: 'blur' }
        ],
      },

      formInline: {
        id:'',
        shopName:'',
        shopAccount:'',
        password:'',
      },
      tableData: [],
      searchTableData:[],
      //分页
      currentPage:"",
    }
  },
  methods:{
    //获取数据
    async getData(){
      var _this=this;
      await this.axios({
        method:"get",
        url:"http://192.168.1.3:8080/getShops",
      }).then(function (response){
        response.data.forEach((item) => {
          _this.tableData.push({
            id: item.id,
            shopName: item.shopName,
            shopCode: item.shopCode,
            shopAccount:item.shopAccount
          })
          _this.searchTableData=_this.tableData;
        });
      });
    },
    //模糊查询数据
    selectData(){
      this.tableData=[];
      for(let i = 0; i<this.searchTableData.length; i++){
        if(this.searchTableData[i].shopName.indexOf(this.formInline.shopName)>=0){
          this.tableData.push(this.searchTableData[i])
        }
      }
    },
    //重置数据
    reload(){
      this.formInline.shopName="";
      this.selectData();
    },
    //显示新增店铺弹窗
    handleEditAdd() {
      this.editFormVisibleAdd = true
    },
    //显示编辑店铺弹窗
    handleEditUpdate: function(index, row) {
      this.editFormVisibleUpdate = true
      this.formInline.id=row.id;
      this.formInline.shopName=row.shopName;
      this.formInline.shopAccount=row.shopAccount;
    },
    //添加的方法
    submitFormAdd(editData){
      this.$refs[editData].validate(async valid => {
        if (valid) {
          await this.$confirm('确定要添加吗?', '信息', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            var _this = this;
            await this.axios({
              method: "post",
              url: "http://192.168.1.3:8080/addShop",
              data: {
                shopName: _this.formInline.shopName,
              },
            }).then(function (response) {
              if(response.data=="Ok"){
                _this.editFormVisibleAdd=false
                _this.$message.success("创建成功")
              }else {
                _this.editFormVisibleAdd=false
                _this.$message.error("创建失败")
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消添加'
            })
          })
          this.tableData = [];
          this.searchTableData = [];
          await this.getData();
        } else {
          this.editFormVisibleAdd = false
          this.$message.error('请输入信息')
        }
      })
    },
    // 修改方法
    async submitFormUpdate(editData) {
      this.$refs[editData].validate(async valid => {
        if (valid) {
          var _this = this;
          await this.axios({
            method: "post",
            url: "http://192.168.1.3:8080/updateShop",
            data: {
              id:_this.formInline.id,
              shopName: _this.formInline.shopName,
              shopAccount: _this.formInline.shopAccount,
              password:_this.formInline.password,
            },
          }).then(function (response) {
            if(response.data=="Ok"){
              _this.editFormVisibleUpdate = false
              _this.$message.success("保存成功")
            }else {
              _this.editFormVisibleUpdate = false
              _this.$message.error("保存失败")
            }
          })
          this.tableData = [];
          this.searchTableData = [];
          await this.getData();

        } else {
          this.editFormVisibleUpdate = false
          this.$message.error('请输入信息')
        }
      })
    },
    //删除的方法
    async deleteUser(index, row) {
      await this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        var _this = this;
        await this.axios({
          method: "post",
          url: "http://192.168.1.3:8080/deleteShop",
          data: {
            id: row.id,
          },
        }).then(function (response) {
          if(response.data=="Ok"){
            _this.$message.success("删除成功")
          }else {
            _this.$message.error("删除失败")
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      this.tableData = [];
      this.searchTableData = [];
      await this.getData();
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisibleAdd = false,
      this.editFormVisibleUpdate = false
    },
    //分页
    handleSizeChange(){
    },
    handleCurrentChange(){
    },
  },
}
</script>

